import createElement from './createElement'
import updateChildren from './updateChildren'

// 对比同一个虚拟节点，并处理，有以下几种情况：
export default function patchVnode(oldVnode, newVnode) {
  // 1.判断新旧vnode是否是同一个对象
  // 1.1若为同一个对象，则什么都不做，直接return
  if (oldVnode === newVnode) return
  // 1.2不为同一个对象，判断新vnode有没有text属性
  if (
    (newVnode.text != undefined && newVnode.children == undefined) ||
    newVnode.children.length == 0
  ) {
    // 1.2.1 新节点有text属性
    if (newVnode.text != oldVnode.text) {
      // 1.2.1.1 新旧节点的text值不同,直接让新节点的text写入到老节点的elm中，
      // 如果老节点的elm中是children，也会直接覆盖
      oldVnode.elm.innerText = newVnode.text
    }
  } else {
    // 1.2.2 新节点没有text属性
    if (oldVnode.children != undefined && oldVnode.children.length > 0) {
      // 1.2.2.1 老节点和新节点都有children,这种情况最复杂
      updateChildren(oldVnode.elm, oldVnode.children, newVnode.children)
    } else {
      // 1.2.2.2 老的没有children,新的有children
      // 1.2.2.2.1 清空老节点的内容
      oldVnode.elm.innerHTML = ''
      // 1.2.2.2.2 创建新的vnode的子节点，创建DOM，上树
      for (let i = 0; i < newVnode.children.length; i++) {
        let dom = createElement(newVnode.children[i])
        oldVnode.elm.appendChild(dom)
      }
    }
  }
}
